<script setup lang="ts">
import Versions from './components/Versions.vue'

const ipcHandle = () => window.electron.ipcRenderer.send('ping')
function sendGetRequest() {
  fetch('http://jsonplaceholder.typicode.com/posts/3')
    .then((response) => response.json())
    .then((data) => console.log(data))
}

function sendPostRequest() {
  fetch('http://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
  })
    .then((response) => response.json())
    .then((data) => console.log(data))
}

function openWebviewPage(page) {
  window.electron.ipcRenderer.send('open-webview-page', page)
}
</script>

<template>
  <!-- <img alt="logo" class="logo" src="./assets/electron.svg" /> -->
  <!-- <div class="creator">Powered by electron-vite</div> -->
  <div class="text">
    Build an Electron app with
    <span class="vue">Vue</span>
    and
    <span class="ts">TypeScript</span>
  </div>
  <p class="tip">Please try pressing <code>F12</code> to open the devTool</p>
  <div class="actions">
    <button @click="sendGetRequest()">发送GET请求</button>
    <button @click="sendPostRequest()">发送POST请求</button>
    <button @click="openWebviewPage('webview')">打开webview页面</button>
    <button @click="openWebviewPage('iframe')">打开iframe页面</button>

    <div class="action">
      <a href="https://electron-vite.org/" target="_blank" rel="noreferrer">Documentation</a>
    </div>
    <div class="action">
      <a target="_blank" rel="noreferrer" @click="ipcHandle">Send IPC</a>
    </div>
  </div>
  <Versions />
</template>
